<template>
  <view>
    <view-tabbar :current="current"></view-tabbar>
    <view class="navBox">
      <text>我的</text>
    </view>
    <view class="headBox">
      <view class="leftBox">
<!--        <open-data type="userNickName" class="UserName"></open-data>-->
        <view>{{ user.name }}</view>
      </view>
      <view class="rightBox">
        <image class="food-image"
               src="../../static/Designer.jpeg"></image>
        <button open-type="getUserInfo"></button>
<!--        <open-data type="userAvatarUrl"></open-data>-->
      </view>
    </view>
    <view class="contentBox">
      <view class="firstBox">
        <view class="rightBox">
          <view class="firstLine">
            <text>账户余额</text>
            <image src="../../static/mine/letter.png" mode="widthFix" class="icons"></image>
          </view>
          <view class="secondLine">
            <text>￥{{ user.balance }}</text>
          </view>
        </view>
      </view>
<!--      <view v-for="item in listViews" :key="item.id">-->
<!--        <view @click="funcName(item.title)">-->
<!--          <list-view>-->
<!--            <template #left>-->
<!--              <image :src="item.src" mode="widthFix" class="listViewIcon"></image>-->
<!--            </template>-->
<!--            <template #right>-->
<!--              <text>{{ item.title }}</text>-->
<!--            </template>-->
<!--          </list-view>-->
<!--        </view>-->
<!--      </view>-->
    </view>

  </view>


</template>

<script>
import Tabbar from '@/components/tabbar/tabbar.vue'
import {getToken} from "@/common/auth";

export default {
  components: {
    'view-tabbar': Tabbar
  },
  data() {
    return {
      user: {
        id: 0,
        name: "再忙，也要记得吃饭哟~",
        username: "",
        sex: "0",
        idNumber: null,
        avatar: "",
        password: "",
        balance: null
      },
      listViews: [
      // {
      //   id: 1,
      //   src: '../../static/mine/address.png',
      //   title: '我的地址'
      // }, {
      //   id: 2,
      //   src: '../../static/mine/collection.png',
      //   title: '我的收藏'
      // }, {
      //   id: 3,
      //   src: '../../static/mine/gift.png',
      //   title: '推荐有奖'
      // },
        {
        id: 4,
        src: '../../static/mine/bg_kefu.png',
        title: '我的客服'
      }, {
        id: 5,
        src: '../../static/mine/bg_wenben.png',
        title: '规则中心'
      },],
      current: "1"
    }
  },
  onShow() {
    uni.hideTabBar({
      animation: false
    })
  }, onLoad() {
    this.user = getToken()
    console.log(getToken())
  },
}</script>

<style scoped lang="less">


.headBox {
  display: flex;
  // justify-content: space-between;
  margin: 10rpx;
  padding: 20rpx;
  justify-content: space-around;

  border-radius: 22rpx;
  border: 1px solid #DFE3EB;

  box-shadow: 0px 4px 20px 0px rgba(8, 8, 8, 0.1);


  .leftBox {

    font-size: 28rpx;
    display: flex;
    align-items: center;

    .UserName {
      font-size: 50rpx;
      color: black;
    }
  }

  .rightBox {
    .food-image {
      width: 100%;
      height: 100%;
    }

    width: 240rpx;
    height: 240rpx;
    overflow: hidden;
    border-radius: 50rpx;

  }
}

.listViewIcon {
  width: 54rpx;
  vertical-align: middle;
}


.contentBox {
  height: 200rpx;
  background-image: linear-gradient(#FFFFFF, #F5F5F4, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF,);
  margin-top: 30rpx;

  .firstBox {
    display: flex;
    margin: 0 20rpx;
    height: 160rpx;

    .leftBox {
      background-color: white;
      padding: 20rpx;
      width: 50%;
      border-radius: 20rpx;
      box-shadow: 0px 4px 20px 0px rgba(8, 8, 8, 0.1);

      .firstLine {
        display: flex;
        justify-content: space-between;

        .icons {
          width: 50rpx;
        }
      }

      .secondLine {
        color: #7F7F7F;
        font-size: 24rpx;

        text:first-child {
          color: #3CB79A;
          font-size: 32rpx;
          font-weight: 700;
        }
      }

    }

    .rightBox {
      border-radius: 20rpx;
      padding: 20rpx;
      width: 100%;
      margin-left: 10rpx;
      box-shadow: 0px 4px 20px 0px rgba(8, 8, 8, 0.1);
      background-color: white;

      .firstLine {
        display: flex;
        justify-content: space-between;

        .icons {
          width: 50rpx;
        }
      }

      .secondLine {
        color: #3CB79A;
        font-weight: 700;
      }


    }
  }

  .secondBox {
    position: relative;
    margin: 40rpx 24rpx 10rpx 24rpx;
    padding: 20rpx 14rpx;
    border-radius: 22rpx;
    display: flex;
    justify-content: space-between;
    border: 1px solid #DFE3EB;
    background-image: linear-gradient(to right, #F5F6F7, #FFFFFF);
    box-shadow: 0px 4px 20px 0px rgba(8, 8, 8, 0.1);

    .rightBox {
      position: absolute;
      top: 50%;
      right: 14rpx;
      transform: translateY(-50%);
      background-color: #3CB79A;
      color: white;
      height: 64rpx;
      padding: 0 24rpx;
      border-radius: 10rpx;
      line-height: 64rpx;
      font-size: 28rpx;
    }

    .leftBox {
      padding-left: 14rpx;

      font-size: 30rpx;
    }
  }
}

</style>
  
  
  
